<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_2587610_0h1jt2opm1q5.css"
    />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        
      }
      ol,
      ul,
      li {
        list-style: none;
      }
      .banner {
        width: 100vw;
        /* height: 468px; */
        height: 100vh;
        margin: 0 auto;
        overflow-x: hidden;
      }
      .banner-box {
        width: 100%;
        margin: 0 auto;
        height: 100%;
        position: relative;
        background: linear-gradient(rgba(18, 75, 161, 1), rgba(8, 109, 174, 1));
      }
      .banner-box li {
        width: 1200px;
        height: 100%;
        position: relative;
        margin: 0 auto;
      }
      .item-1 {
        z-index: 5;
      }
      .item-1-text {
        font-size: 44px;
        position: absolute;
        left: 35px;
        top: 264px;
        color: #fff;
        opacity: 0;
        animation: textA 0.5s linear forwards;
        animation-delay: 0.1s;
      }
      .item-1-we {
        position: absolute;
        left: 600px;
        top: 87px;
        width: 580px;
        height: 380px;
        overflow: hidden;
      }
      .item-1-we img {
        position: absolute;
      }
      .item-1-we-1 {
        top: 170px;
        left: 104px;
        opacity: 0;
        animation: img1A 0.3s linear forwards;
        animation-delay: 0.5s;
      }
      .item-1-we-2 {
        top: 84px;
        left: 50px;
        opacity: 0;
        animation: img2A 0.5s linear forwards;
        animation-delay: 0.7s;
      }
      .item-1-we-3 {
        top: 100px;
        left: 0;
        opacity: 0;
        animation: img3A 0.7s linear forwards;
        animation-delay: 0.9s;
      }
      @keyframes textA {
        to {
          top: 194px;
          opacity: 1;
        }
      }
      @keyframes img1A {
        to {
          top: 100px;
          opacity: 1;
        }
      }
      @keyframes img2A {
        to {
          top: 14px;
          opacity: 1;
        }
      }
      @keyframes img3A {
        to {
          top: 30px;
          opacity: 1;
        }
      }

      /* 右侧边栏 */
      .right-aside {
        position: fixed;
        width: 74px;
        height: 230px;
        background-color: #fff;
        right: 0;
        top: 50%;
        text-align: center;
        box-shadow: 0 0 4px #d1d1d1;
        border-radius: 4px 0 0 4px;
        cursor: pointer;
        z-index: 99;
      }
      .iconfont {
        display: block;
        font-size: 32px;
        color: rgb(234, 132, 53);
        margin-top: 20px;
      }
      .info-text {
        width: 50%;
        text-align: center;
        font-size: 24px;
        color: #080808;
        line-height: 30px;
        margin: 0 auto;
        margin-top: 10px;
      }
      .right-aside span {
        position: absolute;
        top: 98px;
        left: 32px;
        font-size: 42px;
      }
      .right-aside:hover + .toggle-info {
        transform: translateX(8%);
        z-index: 12;
        opacity: 1;
        transition: transform .6s, opacity .4s, z-index 1s;
        transition-delay: .1s,.1s,0s;
      }
      .toggle-info {
        position: fixed;
        /* width: ; */
        height: 230px;
        right: 100px;
        top: 50%;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        z-index: -1;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 4px;
        transform:translateX(118%);
        opacity: 0;
        transition: transform .6s,opacity .4s, z-index 0s;
        transition-delay: 0s,.4s,.6s;
      }
      .toggle-info::after {
        content:'';
        position:absolute;
        top: 50%;
        right: 0;
        width: 10px;
        height: 10px;
        background-color:#fff;
        transform: rotate(45deg) translate(1px,-50%);
        transform-origin: center center;
      }
      .contact-info {

      }
      .code{}
    </style>
  </head>
  <body>
    <div class="banner">
      <ul class="banner-box" style="width: 100%; left: 0; margin-left: 0">
        <li class="item-1">
          <div class="item-1-text">聚焦企业级微信服务升级</div>
          <div class="item-1-we">
            <img
              class="item-1-we-1 lazy"
              src="images/banner_we_1.png"
              alt="#"
            />
            <img
              class="item-1-we-2 lazy"
              src="images/banner_we_2.png"
              alt="#"
            />
            <img
              class="item-1-we-3 lazy"
              src="images/banner_we_3.png"
              alt="#"
            />
          </div>
        </li>
      </ul>
    </div>
    <div class="right-aside">
      <i class="iconfont icon-kefu"></i>
      <div class="info-text">
        咨询
        <br />
        <br />
        反馈
      </div>
      <span>.</span>
    </div>
    <div class="toggle-info">
      <div class="contact-info">
        <div>客服热线</div>
        <p>客服咨询</p>
      </div>
      <div class="code">
        <p>二维码</p>
      </div>
    </div>
    <script>
      let box = document.querySelector(".banner-box");

      let item = document.querySelector(".item-1-we");

      let img1 = document.querySelector(".item-1-we-1");
      let img2 = document.querySelector(".item-1-we-2");
      let img3 = document.querySelector(".item-1-we-3");

      box.addEventListener("mousemove", function (e) {
        // console.log(item)
        let a =
          item.offsetLeft - e.clientX + item.getBoundingClientRect().width;
        let b =
          item.offsetTop - e.clientY + item.getBoundingClientRect().height;
        let x1 = a * 0.01 + "px";
        let y1 = b * 0.1 + "px";
        let x2 = a * 0.03 + "px";
        let y2 = b * 0.08 + "px";
        let x3 = a * 0.015 + "px";
        let y3 = b * 0.06 + "px";

        img1.style.transform = "translate(" + x1 + "," + y1 + ")";
        img2.style.transform = "translate(" + x2 + "," + y2 + ")";
        img3.style.transform = "translate(" + x3 + "," + y3 + ")";
      });
      //banner里的鼠标移动效果
      // $('.banner-box').mousemove(function(event) {
      // 	var a=$('.item-1-we').offset().left-event.clientX+$('.item-1-we').width(),
      // 	    b=$('.item-1-we').offset().top-event.clientY+$('.item-1-we').height(),
      // 	    x_move1 = a*.01+'px',
      // 	    y_move1 = b*.1+'px',
      // 	    x_move2 = a*.03+'px',
      // 	    y_move2 = b*.08+'px',
      // 	    x_move3 = a*.015+'px',
      // 	    y_move3 = b*.06+'px'
      // 	$('.item-1-we-1').css("transform","translate("+x_move1+","+y_move1+")")
      // 	$('.item-1-we-2').css("transform","translate("+x_move2+","+y_move2+")")
      // 	$('.item-1-we-3').css("transform","translate("+x_move3+","+y_move3+")")
      // });
    </script>
  </body>
</html>
